<template>
    <div>

        <form action="" class="good-form">
            <div class="item">
                商品分类：
                <select v-model="good.category" class="kuang">
                    <option v-for="i in categorys" v-bind:key="i">
                        {{i.categoryname}}
                    </option>
                </select>
            </div>
            <div class="item">
                商品名称：
                <input type="text" v-model="good.goodsname" class="kuang">
            </div>
            <div class="item">
                商品价格：
                <input type="text" v-model="good.price" class="kuang">
            </div>
            <div class="item">
                商品图片：
                <input id="img_file" type="file" v-bind:src="good.imgurl" class="kuang">
            </div>
            <div class="item">商品详情：<br>
                <textarea v-model="good.comment" cols="60" rows="4"></textarea>
            </div>
            <div class="item">
                <a v-on:click="handleClick()" class="light">保存</a>
                <a v-on:click="jump" class="light">取消</a> 
            </div>
        </form>
    </div>
</template>
<script>
module.exports = {
    data() {
        let localcategorys = JSON.parse(localStorage.getItem("categorys"));
        return {
            ts:false,
            categorys:localcategorys,
            good: {
                category:"",
                goodsname:"",
                price:null,
                imgurl:"./img/1.jpeg",
                comment:""
            },
        }
    },
    methods: {
        closets() {
            this.ts = false
        },
        jump(){
            window.location.reload();
        },
        handleClick() {
                var str=$("#img_file").val();
                var arr=str.split('\\');//注split可以用字符或字符串分割
                var my=arr[arr.length-1];//这就是要取得的图片名称
                alert(my);
                this.good["imgurl"] = "./img/"+my;
                let localcategorys = JSON.parse(localStorage.getItem("categorys"));
                let localgoods = JSON.parse(localStorage.getItem("goods"));
                console.log(localgoods);
                localgoods.push(this.good);
                for (i in localcategorys) {
                    if (this.good.category === localcategorys[i].categoryname) {
                        localcategorys[i].goodsmount += 1;
                        console.log(localcategorys[i].goodsmount);
                    }
                }
                localStorage.setItem("categorys", JSON.stringify(localcategorys));
                localStorage.setItem("goods", JSON.stringify(localgoods));
                this.ts = true
        }
    }
}
</script> 
<style scoped>
    .good-form {
        width: 100%;
        height: 100%;
        margin: 15px;
    }
    .good-form div {
        width: 800px;
        padding: 15px 10px;
    }
    .light {
        user-select: none;
        cursor:hand;
        border-radius: 5px;
        background-color: rgb(235, 218, 203);;
    }
    .tip {
        position: relative;
    }
    .tip .success {
        width: 120px;
        height: 60px;
        border: 1px solid #ccc;
        text-align: center;
        position: absolute;
        top: 100px;
        left: 35%;
    }
    .kuang{
        width: 150px;
        height: 30px;
    }
</style>
